<template>
    <view class="pub_page pub_good_info pub_header_padding">
        <pub-head headerName="good_info" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll good_info_box" v-if="goodInfo != ''">
            <div class="banner_div" v-if="orderType != 4">
                <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
                    v-cloak:indicator-dots="false">
                    <swiper-item v-for="(item, key) in goodInfo.goodsCarousel" :key="key">
                        <view class="swiper_item" :style="{ backgroundImage: 'url(' + item + ')' }"></view>
                    </swiper-item>
                </swiper>
            </div>
            <div class="info_div" v-if="orderType != 4">
                <div class="price" v-if="orderType == 3"> <span class="p">{{ goodInfo.sellPrice }}</span> 兑换券</div>
                <div class="price" v-else>￥ <span class="p">{{ goodInfo.sellPrice }}</span></div>
                <div class="title">{{ goodInfo.goodsName }}</div>
                <div class="text" v-if="orderType != 10">{{ goodInfo.content }}</div>
            </div>
            <div class="detail_div" v-if="orderType == 10">
                <div class="title">商品详情</div>
                <br>
                <rich-text class="detail_box" :nodes="goodInfo.description"></rich-text>
            </div>
            <div class="detail_div detail_div_nomargin" v-else-if="orderType == 4">
                <img class="imgs" :src="li" v-for="(li, key) in goodInfo.goodsDetail" :key="key" />
            </div>
            <div class="detail_div" v-else>
                <div class="title">商品详情</div>
                <br>
                <img class="imgs" :src="li" v-for="(li, key) in goodInfo.goodsDetail" :key="key" />
            </div>
            <div class="bottom_div">
                <div class="pub_btn" v-if="orderType == 10" @click="skuDeal('open')">立即购买</div>
                <div class="pub_btn" v-else-if="orderType == 3" @click="toGoodOrder">立即兑换</div>
                <div class="pub_btn" v-else-if="orderType == 2" @click="toGoodOrder">立即换购</div>
                <div class="pub_btn" v-else @click="toGoodOrder">立即购买</div>
            </div>
        </div>
        <div v-if="loadFinish && goodInfo == ''">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="pub_nodata_1">当前商品已被删除或下架~</div>
        </div>

        <div class="sku_alert_div" v-if="skuInfo.show">
            <div class="box">
                <div class="title">请选择规格 <span class="close icon-font-basic icon-b-off-1"
                        @click="skuDeal('close')"></span>
                </div>
                <div class="info">
                    <pub-image class="img" :src="skuInfo.cover"></pub-image>
                    <div class="text">
                        <div class="p_1">{{ skuInfo.goodsName }}</div>
                        <div class="p_2"><span class="span_0">￥</span> <span class="span_1">{{ skuInfo.sellPrice
                                }}</span><span class="span_2">库存：{{ skuInfo.stock }}</span></div>
                    </div>
                </div>
                <div class="sku_lists">
                    <div class="sku_li" :class="li.skuId == skuInfo.skuId ? 'sku_li_active' : ''"
                        v-for="(li, key) in goodInfo.skuInfoList" :key="key" @click="skuDeal('sku_click', li)">{{
                        li.goodsName }}
                    </div>
                </div>
                <br>
                <div class="pub_btn" v-if="skuInfo.stock > 0" @click="toGoodOrder">确认购买</div>
                <div class="pub_btn pub_btn_no" v-else>抱歉，暂无库存</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '商品详情',//标题栏内容
                left_type: 3,
            },
            orderType: '',//1直营商品 2增值商品 3兑换商品 4经销商大礼包   10供应链商品  

            id: '',//orderType为1,2,3时有值

            // 供应链商品有值
            spuId: '',
            skuInfo: {
                show: false,
                skuId: '',
                skuName: '',
                goodsName: '',
                cover: '',
                salePrice: '',
                stock: ''
            },

            goodInfo: '',
            loadFinish: false
        };
    },
    onLoad(option) {
        // console.log(option);
        this.orderType = option.orderType || 1;

        this.id = option.id || '';
        this.spuId = option.spuId || '';

        if (this.orderType == 4) {
            this.getDealerGoodsInfo();
        }
        if (this.id) {
            this.getGoodInfo(this.id);
        }
        // if (this.spuId) {
        //     this.getCrystalGoodInfo();
        // }
    },
    methods: {
        async getGoodInfo(id) {
            this.$comFun.openLoading();
            const res = await this.$request.get('goods/getGoodsInfo', {
                id: id
            });
            this.$comFun.closeLoading();
            // console.log(res);
            this.loadFinish = true;
            if (res.code == 200 && res.result) {
                res.result.goodsDetail = res.result.goodsDetail ? res.result.goodsDetail.split(",") : [];
                res.result.goodsCarousel = res.result.goodsCarousel ? res.result.goodsCarousel.split(",") : [res.result.coverImg];
                this.goodInfo = res.result;
                this.$forceUpdate();
            }
        },
        async getDealerGoodsInfo() {
            this.$comFun.openLoading();
            const res = await this.$request.get('goods/getDealerGoodsInfo', {});
            this.$comFun.closeLoading();
            // console.log(res);
            this.loadFinish = true;
            if (res.code == 200 && res.result) {
                res.result.goodsDetail = res.result.goodsDetail ? res.result.goodsDetail.split(",") : [];
                this.goodInfo = res.result;
                this.$forceUpdate();
            }
        },
        // 获取供应链商品信息
        async getCrystalGoodInfo() {
            this.$comFun.openLoading();
            const res_open = await this.$request.get('goods/getCrystalGoodsInfo', {
                spuId: this.spuId
            });
            this.$comFun.closeLoading();
            // console.log(res);
            this.loadFinish = true;
            if (res_open.code == 200 && res_open.result.skuInfoList.length > 0) {
                let richText = '';
                if (res_open.result.description.slice(0, 1) == '<') {
                    richText = res_open.result.description;
                } else {
                    try {
                        richText = JSON.parse(res_open.result.description);
                        let arr = richText.map(li => {
                            return `<img src='${li}'  width='100%' />`
                        })
                        richText = arr.join(" ");
                    } catch (error) {
                        richText = `<img src='${res_open.result.cover}'  width='100%' />`;
                    }
                }
                // console.log(111, richText);
                var pattern = /^(http:\/\/|https:\/\/)/; // 定义正则表达式
                if (!pattern.test(res_open.result.cover)) {
                    res_open.result.cover = "http:" + res_open.result.cover;
                }

                this.goodInfo = {
                    goodsName: res_open.result.goodsName,
                    cover: res_open.result.cover,
                    goodsCarousel: [res_open.result.cover],
                    description: richText,
                    sellPrice: res_open.result.salePrice,
                    stock: res_open.result.stock,

                    skuInfoList: res_open.result.skuInfoList,
                }
                console.log(this.goodInfo);
            }
        },
        skuDeal(type, data_1) {
            switch (type) {
                case 'open':
                    this.skuInfo = {
                        show: true,
                        skuId: this.goodInfo.skuInfoList[0].skuId,
                        skuName: this.goodInfo.skuInfoList[0].goodsName,
                        goodsName: this.goodInfo.goodsName,
                        cover: this.goodInfo.skuInfoList[0].cover || this.goodInfo.cover,
                        sellPrice: this.goodInfo.skuInfoList[0].salePrice,
                        stock: this.goodInfo.skuInfoList[0].stock,
                    };
                    break;
                case 'close':
                    this.skuInfo = {
                        show: false,
                        skuId: '',
                        skuName: '',
                        goodsName: '',
                        cover: '',
                        sellPrice: '',
                        stock: ''
                    };
                    break;
                case 'sku_click':
                    this.skuInfo.skuId = data_1.skuId;
                    this.skuInfo.skuName = data_1.goodsName;
                    this.skuInfo.cover = data_1.cover || this.goodInfo.cover;
                    this.skuInfo.sellPrice = data_1.salePrice;
                    this.skuInfo.stock = data_1.stock;
                    this.$forceUpdate();
                    break;
                default:
                    break;
            }
        },
        toGoodOrder() {
            let goodInfo = {};
            if (this.orderType == 10) {
                if (this.skuInfo.skuId == '') {
                    this.$comFun.toast('请选择规格');
                    return;
                }
                goodInfo = {
                    coverImg: this.skuInfo.cover,
                    goodsName: this.skuInfo.goodsName,
                    sellPrice: this.skuInfo.sellPrice,
                    skuId: this.skuInfo.skuId,
                    skuName: this.skuInfo.skuName,
                    spuId: this.spuId,
                    stock: this.skuInfo.stock,
                }
                this.skuDeal('close');
            } else {
                goodInfo = {
                    coverImg: this.goodInfo.coverImg,
                    goodsName: this.goodInfo.goodsName,
                    sellPrice: this.goodInfo.sellPrice,
                    id: this.goodInfo.id,
                    skuId: this.goodInfo.id,
                    spuId: this.goodInfo.id,
                    stock: 0,
                }
            }
            this.$comFun.openWin('/pages/index/good_order', {
                orderType: this.orderType,
                goodInfo: JSON.stringify(goodInfo),
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/index.scss";
</style>
